<template>
    <div>
         <!-- 面包屑导航区 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片视图区域 -->
        <el-card>
          <el-row>
              <el-col>
                   <el-button type="primary" @click="showAddCateDialog">添加分类</el-button>
              </el-col>
          </el-row>
          <!-- 树形表格区域 -->
            <tree-table :data='cateList' :columns='columns'
             :selection-type="false" :expand-type="false" show-index 
              border index-text="#" :show-row-hover='false'>
              <!-- 是否有效 -->
              <template slot="isok" slot-scope="scope">
                  <i class="el-icon-success" v-if="scope.row.cat_deleted===false" style="color:lightgreen"></i>
                  <i class="el-icon-error" v-else style="color:lightgreen"></i>
              </template>
            <!-- 排序 -->

            <template slot="order" slot-scope="scope">
                <el-tag size='mini' v-if="scope.row.cat_level===0">一级</el-tag>
                <el-tag type='success' size='mini' v-else-if="scope.row.cat_level===1">二级</el-tag>
                <el-tag type='warning' size='mini' v-else>三级</el-tag>
                
            </template>
            <!-- 操作 -->
            <template slot="opt">
                <el-button type='primary' icon='el-icon-edit' size='mini'>编辑</el-button>
                <el-button type='warning' icon='el-icon-delete' size='mini'>删除</el-button>
            </template>
            </tree-table>
          <!-- 分页区域 -->
             <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum"
                :page-sizes="[1, 5, 10, 15]"
                :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="this.total">
            </el-pagination>
        </el-card>

        <!-- 添加分类的对话框 -->
        <el-dialog
            title="提示"
            :visible.sync="addCateDialogVisible"
            width="50%"
            @close='addCateDialogClose'>
            <!-- 添加分类的表单 -->
           <el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px">
            <el-form-item label="分类名称 ：" prop="cat_name">
                <el-input v-model="addCateForm.cat_name"></el-input>
            </el-form-item>
             <el-form-item label="父级分类 ：" >
                <!-- 级联选择器 -->
                <el-cascader
                   
                    clearable
                    v-model="selectedKeys"
                    :options="parentCateList"
                    :props="cascaderProps"
                    @change="parentCateChange">
                </el-cascader>
            </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addCateDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addCate">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return{
            // 商品分类数据列表
            cateList:[],
            // 查询条件
            queryInfo:{
                type:3,
                pagenum:1,
                pagesize:5
            },
            total:0,
            columns:[{
                 label:'分类名称',
                 prop:'cat_name'
            },{
                label: "是否有效",
                // 表示当前列定义为模板列
                type: "template",
                // 表示当前这一列使用模板的名称
                template: "isok"
            },{
                label:'排序',
                type:'template',
                template:'order'
            },{
                label:'操作',
                type:'template',
                template:'opt'
            }],
            // 控制添加分类对话框的显示与隐藏
            addCateDialogVisible:false   ,
            // 添加分类的表单数据对象
            addCateForm:{
                // 将要添加的分类规则名称
                cat_name:'',
                // 父级分类的id
                cat_pid:0,
                // 分类的等级默认要添加的是一级分类
                cat_level:0
            },
               // 添加分类表单的验证对象
            addCateFormRules:{
                cat_name:[
                     { required: true, message: '请输入分类名称', trigger: 'blur' },
                ]
            },
            // 父级分类的列表
            parentCateList:[],
            // 指定级联选择器的配置对象
            cascaderProps:{
                expandTrigger: 'hover',
                value: 'cat_id',
                label: 'cat_name',
                children:'children',
                // 单独选中父级菜单id属性
                checkStrictly:true
            },
            // 选中的父级分类的ID数组
            selectedKeys:[]
                 
            

        }
    },
    created(){
        this.getCateList()
    },
    methods:{
        // 获取商品分类数据
      async  getCateList(){
          const {data:res} = await this.$http.get('categories',{params:this.queryInfo})
        if(res.meta.status!==200){
            return this.$message.error('获取商品列表失败')
        }
        // console.log(res.data)
        // 把数据列表赋值给cateList
        this.cateList=res.data.result
        this.total=res.data.total
        },
        // 监听pagesize改变事件
        handleSizeChange(newSize){
            this.queryInfo.pagesize=newSize
            this.getCateList()
        },
        // 监听pagenum事件函数
        handleCurrentChange(newPage){
            this.queryInfo.pagenum=newPage
            this.getCateList()
        },
        // 点击按钮，展示添加分类对话框
        showAddCateDialog(){
            // 获取父级分类数据列表，在展示出对话框
            this.getParentCateList()
            this.addCateDialogVisible=true
        },
        // 获取父级分类的数据列表
      async  getParentCateList(){
         const {data:res} = await this.$http.get('categories',{params:{type:2}})
         if(res.meta.status!==200){
             return this.$message.error('获取父级分类数据失败')
         }
         console.log(res.data)
         this.parentCateList=res.data
        },
        // 选择项发生变化触发这个函数
        parentCateChange(){
            // console.log(this.selectedKeys)
            // 如果selectedKeys数组中lenght大于0，证明选中了数组父级分类，
            // 反之，则没有选中任何父级分类
            if(this.selectedKeys.length>0){
                // 父级分类的id
                this.addCateForm.cat_pid=this.selectedKeys[this.selectedKeys.length-1]
                // 当前分类的等级赋值
                this.addCateForm.cat_level=this.selectedKeys.length
                return
            }else{
                 this.addCateForm.cat_pid=0
                 this.addCateForm.cat_level=0
            }
        },
        // 确定添加分类
        addCate(){
           this.$refs.addCateFormRef.validate(async valid=>{
            if(!valid) return
            const {data:res} =await this.$http.post('categories',this.addCateForm)
            if(res.meta.status!=200){
                this.$message.error('添加分类失败！')
            }
            this.$message.success('添加分类成功！')
            this.getCateList()
            this.addCateDialogVisible = false
           })
        },
        // 监听对话框的关闭事件,清空表单中的内容
        addCateDialogClose(){
            this.$refs.addCateFormRef.resetFields()
            this.selectedKeys=''
            this.addCateForm.cat_pid=0
            this.addCateForm.cat_level=0

        }

    }
}
</script>

<style lang="less" scoped>
.el-button{
    margin:15px;
}
.el-cascader{
    width: 100%;
}
</style>